<template>
  <div class="motivation">
    <div class="search">
      <LabelDataPicker
        type="month"
        v-model="month"
        placeholder="请选择日期"
        size="mini"
        clearable
        value-format="yyyy-MM"
        format="yyyy-MM"
        @change="monthChange"
      />
      <LabelSelect
        placeholder="请选择营业部"
        size="mini"
        clearable
        v-model="dept"
        @change="monthChange"
      />
    </div>
    <div class="content">
      <div class="table">
        <el-table :data="tableData" height="520" size="mini">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="branch" label="分支机构" width="220">
          </el-table-column>
          <el-table-column
            prop="newCustomerIncentives"
            label="新增客户激励(元)"
          >
          </el-table-column>
          <el-table-column prop="stockScaleIncentive" label="存量规模激励(元)">
          </el-table-column>
          <el-table-column
            prop="responsiblePersonIncentive"
            label="负责人激励(元)"
          >
          </el-table-column>
        </el-table>
      </div>

      <div class="graph">
        <Card title="营业部TOP10">
          <div>
            <div ref="top10" class="top10"></div>
          </div>
        </Card>
        <Card title="营业部走势">
          <div>
            <div ref="trend" class="trend"></div>
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
import LabelDataPicker from "@/components/LabelDataPicker.vue";
import LabelSelect from "@/components/LabelSelect.vue";
import Card from "@/components/Card";
import { getPie, getLine } from "@/utils/echarts_sample.js";
const tableData = [];
for (let index = 0; index < 50; index++) {
  tableData.push({
    date: "2016-05",
    branch: "宜昌东山大道证券营业部" + index,
    newCustomerIncentives: "1128.68",
    stockScaleIncentive: "5259.23",
    responsiblePersonIncentive: "6387.92",
  });
}
export default {
  name: "motivation",
  components: {
    LabelDataPicker,
    LabelSelect,
    Card,
  },
  data() {
    return {
      month: "2025-02",
      dept: "",
      tableData,
    };
  },
  methods: {
    monthChange(value) {
      console.log("value", value);
    },
    getTop10() {
      getPie({
        el: this.$refs.top10,
        title: "证券营业部TOP10",
        data: [
          { name: "宜昌东山大道", value: 1000 },
          { name: "上海金桥路", value: 2000 },
          { name: "上海江宁路", value: 1300 },
        ],
      });
    },
    trend() {
      const formatter = (data) => {
        let unit = "%";
        const ret = data.map((item) => {
          return `${item.marker} ${item.seriesName}: ${item.value}${unit}`;
        });
        return `${data[0].name}<br />` + ret.join("<br/>");
      };
      getLine({
        el: this.$refs.trend,
        data: [{ name: "123", value: [1, 23, 20] }],
        xData: ["2025-01", "2025-02", "2025-03"],
        tooltipFormatter: formatter,
        rotate: 20,
      });
    },
  },
  mounted() {
    this.getTop10();
    this.trend();
  },
};
</script>

<style lang="less" scoped>
.motivation {
  height: 100%;
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  .search {
    position: sticky;
    top: 1px;
    z-index: 1;
    background-color: #e0b5b570;
    padding: 6px;
    display: flex;
    column-gap: 10px;
    ::v-deep .el-input {
      width: 250px;
    }
  }
  .content {
    margin-top: 8px;
    display: flex;
    column-gap: 10px;
    .table {
      flex: 1;
    }
    .graph {
      display: flex;
      flex-direction: column;
      row-gap: 10px;
      width: 800px;
      box-sizing: border-box;
      .top10 {
        height: 220px;
        width: 97%;
      }
      .trend {
        height: 220px;
        width: 97%;
      }
    }
  }
}
</style>
